Google I/O 2025의 10가지 업데이트: CSS 캐러셀, AI 기반 DevTools, 멀티모달 기능이 있는 Prompt API 등

게시일: 2025년 5월 20일

Google I/O 2025에서 생산성을 높이고 더 강력하고 원활하며 현대적인 웹을 빌드할 수 있는 새로운 기능이 공개되었습니다.

다음은 최신 기능을 직접 사용하고 다음 프로젝트에 영감을 줄 수 있는 10가지 주요 혁신입니다.

1. CSS와 HTML 몇 줄로 캐러셀을 빌드하는 것이 그 어느 때보다 쉬워졌습니다.

첫 페인트 시 상호작용이 가능한 멋진 캐러셀을 CSS로 빌드하세요. Chrome 135에서는 스타일 지정 가능한 단편화, 스크롤 마커 요소, 스크롤 버튼과 같은 새로운 CSS 원시를 도입하여 JavaScript 없이 캐러셀을 간편하게 만들 수 있도록 했습니다. 익숙한 CSS 개념을 사용하여 훨씬 짧은 시간에 풍부하고 양방향이며 원활하고 접근성이 뛰어난 캐러셀을 만드세요.

CSS 캐러셀을 조기에 도입한 Pinterest는 코드가 90% 감소하여 JavaScript 2,000줄에서 CSS 200줄로 줄었습니다.

2. 선언적 팝오버: 새로운 Interest Invoker API 소개

실험용 Interest Invoker API는 오리진 트라이얼로 제공됩니다. 이 기능을 사용하면 방문자 관심이 잠시 활성화될 때 팝오버를 선언적으로 전환할 수 있습니다. 스타일을 지정할 수 없는 [title] 속성은 안녕히 계세요. [interesttarget]를 사용해 보세요. 앵커 포지셔닝 APIPopover API와 결합하여 JavaScript 없이 도움말이나 마우스 오버 카드와 같은 풍부하고 반응이 빠르며 상호작용이 가능한 UI 요소를 만드세요. 최신 CSS를 사용하면 무한한 가능성을 펼칠 수 있습니다.

캐러셀, 앵커 포지셔닝 API, 팝오버 API, 관심분야 호출자 API를 사용하여 개발자 기조연설에서 강력한 영화관 환경을 만들었습니다.

3. Gemini Nano와 같은 주요 모델을 사용하는 여러 기본 제공 AI API를 사용할 수 있으며 이제 Prompt API에 멀티모달 기능이 포함되어 있습니다.

Google의 내장 AI 여정은 계속되고 있으며, 향상된 개인 정보 보호, 지연 시간 단축, 비용 절감과 함께 고품질 AI 생성 결과물에 액세스할 수 있습니다. 내장 AI는 온디바이스 작업에 전문가 모델과 Google의 가장 효율적인 모델인 Gemini Nano를 사용합니다. Chrome 138부터 Chrome 확장 프로그램용 Summarizer API, Language Detector API, Translator API, Prompt API를 안정화 버전에서 사용할 수 있습니다. 또한 Writer API 및 Rewriter API는 출처 체험판에서 사용할 수 있습니다.

새로운 Proofreader API는 Chrome Canary에서 다중 모드 기능이 있는 Prompt API와 함께 사용할 수 있습니다.

최신 정보를 확인하려면 사전 미리보기 프로그램에 참여하여 새로운 내장 AI API를 공동작업하고 웹에서 AI의 미래를 만들어 보세요.

Deloitte 엔지니어링 플랫폼은 Prompt, Summarizer, Writer, Rewriter API를 실험하여 맞춤형 온보딩 환경과 더 빠른 피드백 제공 방법을 만들었습니다. 그 결과 정보 검색 속도가 30% 빨라질 것으로 예상됩니다. [^1]
Adobe는 Acrobat Chrome 확장 프로그램에서 다중 모드 기능이 있는 Prompt API를 실험하여 사용자가 스캔한 PDF에서 즉시 요약을 생성하고 Acrobat AI 어시스턴트로 중요한 정보를 더 빠르게 검증할 수 있도록 했습니다. 이 모든 작업이 Chrome에서 직접 이루어집니다.

4. 클라이언트 측 AI가 Firebase 및 Gemini Developer API를 사용하여 확장되어 하이브리드 AI 솔루션을 제공합니다.

Firebase 및 Gemini Developer API와의 공동작업을 통해 이제 모바일과 데스크톱에서 AI 기반 웹 환경을 빌드할 수 있습니다. 이러한 애플리케이션은 가능한 경우 클라이언트 측 AI를 사용하고 서버 측 AI로 원활하게 확장하여 모든 기기와 브라우저에 도달합니다. 오늘부터 Firebase AI 로직을 사용하면 Gemini Nano를 기반으로 하는 Chrome의 기본 제공 Prompt API와 Gemini Developer API를 사용하는 서버 측의 유사한 소형 모델에 원활하게 액세스할 수 있습니다.

5. Chrome DevTools의 AI 어시스턴스가 스타일 지정, 성능 등에서 디버깅 워크플로를 지원합니다.

AI 지원을 사용하면 Gemini와 채팅하여 Elements 패널에서 스타일 지정 오류를 디버그하고, Performance 패널에서 성능 문제를 해결하고, Network 패널에서 네트워크 문제를 식별하고, Sources 패널에서 소스 파일을 찾을 수 있습니다. 또한 이제 AI 지원이 스타일 지정 관련 변경사항을 Elements 패널의 소스 코드에 직접 적용할 수 있습니다.

Chrome DevTools에 추가된 최신 기능을 확인하려면 최신 동영상을 확인하세요.

6. Chrome DevTools 성능 패널의 실제 사용자 데이터, Lighthouse 통계, AI 기능을 사용하면 성능 문제를 파악하고 해결할 수 있습니다.

새롭게 디자인된 성능 패널을 사용하면 이제 로컬 및 실제 사용자 코어 웹 바이탈 데이터에 액세스하고 Gemini에 요청하여 성능 문제를 파악하고 해결할 수 있습니다. 유용한 정보 사이드바를 사용하면 Lighthouse 유용한 정보를 트레이스에 가져와 워크플로를 중단하거나 생산성을 저해하지 않고도 더 빠르게 디버그할 수 있습니다.

7. 이제 익숙한 도구(VS Code, ESLint 등)에서 기준 기능을 사용할 수 있습니다.

기준선 통합을 통해 웹 개발 워크플로의 정확성과 신뢰성을 높입니다. 익숙한 웹 개발 도구 내에서 주요 브라우저에서 웹 기능을 사용할 수 있는지 명확하게 확인할 수 있습니다.

  • IDE: 이제 VSCode에서 빌드하는 즉시 기능의 기준 상태가 표시됩니다. JetBrains의 WebStorm 및 Firebase 스튜디오, Windsurf, GitHub Codespaces 등의 VS Code 기반 IDE도 곧 지원될 예정입니다.
  • 린터: CSS 및 HTML 린터는 기준 타겟보다 최신인 기능을 사용할 때 사전에 경고할 수 있습니다. 기준은 CSS용 ESLint, HTML ESLint, Stylelint에서 지원됩니다.
  • 분석: RUMvision은 기준 데이터와 실제 사용자 측정항목을 결합하여 잠재고객에 적합한 기준 버전을 전략적으로 선택할 수 있도록 지원합니다. Google 애널리틱스 사용자는 Google 애널리틱스 기준치 검사기에 데이터를 업로드하여 기준치 추천을 받을 수 있습니다.
  • 컴파일러: browserslist-config-baseline을 사용하여 기준 타겟을 Babel 및 PostCSS와 같은 코드 컴파일 도구에 연결하여 소스 코드에서 최신 기능을 사용하고 프로덕션 빌드에서 이를 컴파일할 수 있습니다.

8. 웹 플랫폼 대시보드로 웹 기능 지원을 한눈에 확인

작년에 Google은 전체 웹 플랫폼을 기능 집합으로 매핑하는 웹 지형지물 데이터를 탐색할 수 있는 방법인 웹 플랫폼 대시보드를 발표했습니다. 이제 웹 기능 데이터 세트가 100% 매핑되어 AVIF에서 뷰 전환에 이르기까지 모든 브라우저의 모든 기능의 기준 상태(사용 가능 여부 및 채택 여부 포함)를 처음으로 확인할 수 있습니다. 최신 정보를 확인하고 자신 있게 빌드하세요.

9. 인증 관리자를 통한 간소화된 로그인 환경을 위한 개발자 체험판

비밀번호, ID 제휴, 패스키를 비롯한 여러 인증 방법이 사이트 사용자에게 불편을 줄 수 있다는 점을 Google은 잘 알고 있습니다. Google의 목표는 사용자에게 통합되고 간편한 로그인 환경을 제공하는 것이므로 Android의 인증 관리자의 직관적인 환경을 Chrome에 제공하고 있습니다. 곧 사용자가 로그인을 클릭하면 Chrome에서 Google 비밀번호 관리자의 패스키 및 비밀번호와 같이 이 사이트에서 사용할 수 있는 사용자 인증 정보를 표시하여 원활하게 로그인할 수 있습니다. 이 환경에 ID 제휴도 추가할 계획입니다. 웹용 인증 관리자가 이제 개발자 체험판으로 제공됩니다. 올해 말에 더 많은 업데이트 소식을 기대해 주세요.

10. 제출 검토를 취소하는 기능으로 Chrome 확장 프로그램을 더 빠르게 반복합니다.

Chrome 확장 프로그램을 제출하는 과정이 원활하고, 우려 없이, 즐거워야 합니다. 하지만 대기 중인 제출물의 실수를 빠르게 수정할 수 없는 점이 불편을 끼쳐 드린 것으로 알고 있습니다. 올해 초에는 이전에 게시된 버전을 롤백하는 기능을 기반으로 대기 중인 제출을 취소하는 기능을 도입했습니다. 이 기능은 모두 변경사항을 신속하게 수정하고 다시 제출할 수 있도록 지원하기 위한 것입니다.

최신 정보는 developer.chrome.comweb.dev에서 확인하세요. Google에서 어떻게 강력한 웹을 훨씬 더 쉽게 만들고 있는지 자세히 알아보세요. X, YouTube, LinkedIn에서도 Google과 소통하세요. 다음 I/O에서 뵙겠습니다.


Deloitte는 영국의 보증 유한 책임 회사인 Deloitte Touche Tohmatsu Limited ('DTTL'), DTTL의 회원사 네트워크, 관련 법인 중 하나 이상을 의미합니다. DTTL과 각 회원 법인은 법적으로 별개이며 독립된 법인입니다. DTTL('Deloitte Global'이라고도 함)은 고객에게 서비스를 제공하지 않습니다. 미국에서 Deloitte는 DTTL의 미국 회원사 1곳 이상, 미국에서 'Deloitte'라는 이름을 사용하여 운영되는 관련 법인 및 각 해당 제휴사를 의미합니다. 공인 회계의 규칙 및 규정에 따라 고객을 증명하는 데 특정 서비스가 사용되지 않을 수 있습니다. 글로벌 회원사 네트워크에 대해 자세히 알아보려면 www.deloitte.com/about을 참고하세요.